{% extends "zato/index.html" %}

{% block html_title %}KVDB import/export{% endblock %}

{% block "extra_css" %}
    <link rel="stylesheet" type="text/css" href="/static/css/fileuploader.css">
{% endblock %}

{% block "extra_js" %}

    {% comment %} Common JS {% endcomment %}
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/common.js"></script>

    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/common.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.form.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.cookie.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/fileuploader.js"></script>

    <script nonce="{{ CSP_NONCE }}">

        var on_upload_complete = function(id, file_name, response){
            if(response.success) {
                $.fn.zato.user_message(true, 'Data imported');
            }
            else {
                $.fn.zato.user_message(false, response.response);
            }
        };

        function create_uploader(){
            var options = {
                element: $('#uploader')[0],
                action: 'cluster/{{ cluster_id }}/import/',
                onComplete: on_upload_complete,
                debug: true,
                template: '<div class="qq-uploader">' +
                        '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
                        '<div class="qq-upload-button" style="width:170px">Import data dictionaries</div>' +
                        '<span class="form_hint">&nbsp;Note: This will first delete any existing ones</span>' +
                        '<ul class="qq-upload-list"></ul>' +
                     '</div>',
            };
            var uploader = new qq.FileUploader(options);
        }
        $(document).ready(function() {
          create_uploader();
        });

    </script>

{% endblock %}

{% block "content" %}

<h2 class="zato">Data dictionaries : Import/export</h2>

{% if not zato_clusters %}
    {% include "zato/no-clusters.html" %}
{% else %}

    <div id="user-message-div" style='display:none'><pre id="user-message" class="user-message"></pre></div>

{% include "zato/search-form.html" with page_prompt="Show the import/export form"%}

{% if cluster_id %}
<div class='page_prompt' style="clear:left">
    <a href="{% url "kvdb-data-dict-dictionary" %}?cluster={{ cluster_id }}" class="common">Dictionaries</a>
    <a href="{% url "kvdb-data-dict-translation" %}?cluster={{ cluster_id }}" class="common">Translations</a>
    <a href="{% url "kvdb-data-dict-impexp" %}?cluster={{ cluster_id }}" class="common current">Import/export</a>
</div>

<div id="markup">
    <table id="data-table">
        <tr>
            <td class='inline_header'>Import</td>
        </tr>
        <tr>
            <td style="padding-top:16px;padding-bottom:0px">
                <div id="uploader">
                    <noscript>
                        <p>Please enable JavaScript to use file uploader.</p>
                    </noscript>
                </div>
            </td>
        </tr>
        <tr>
            <td class='inline_header'>Export</td>
        </tr>
        <tr>
            <td id="td_import">
                <a href="{% url "kvdb-data-dict-impexp-export" cluster_id %}" class="common">Click to export data dictionaries</a>
            </td>
        </tr>
    </table>
</div>

{% endif %}
{% endif %}


{% endblock %}
